Foundation进度条Foundation进度条可以作为程序处理的程度来显示:我们可以在元素中使用.progress类来创建进度条,.meter类用于子元素()。我们可以在元素中设置进度百分比,如下所示: 实例 divclass="progress"> spanclass="meter" style="width:70%">/span>/div>尝试一下»进度条颜色默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary,.success,或.alert: 实例 divclass="progress"> spanclass="meter" style="width:50%">/s
Foundation进度条Foundation进度条可以作为程序处理的程度来显示:我们可以在元素中使用.progress类来创建进度条,.meter类用于子元素()。我们可以在元素中设置进度百分比,如下所示: 实例 divclass="progress"> spanclass="meter" style="width:70%">/span>/div>尝试一下»进度条颜色默认情况下,进度条颜色为蓝色。不同颜色的类为:.secondary,.success,或.alert: 实例 divclass="progress"> spanclass="meter" style="width:50%">/s
Foundation提醒框Foundation可以很简单的创建一个提醒框:提醒框可以使用.alert-box类创建,可以添加可选的类:.secondary,.success,.info,.warning或.alert: 实例 divdata-alertclass="alert-box"> Thisisa defaultalertbox. /div>divdata-alert class="alert-boxsecondary"> Thisisasecondaryalertbox. /div>divdata-alertclass="alert-boxsuccess"> strong>Succe
Foundation提醒框Foundation可以很简单的创建一个提醒框:提醒框可以使用.alert-box类创建,可以添加可选的类:.secondary,.success,.info,.warning或.alert: 实例 divdata-alertclass="alert-box"> Thisisa defaultalertbox. /div>divdata-alert class="alert-boxsecondary"> Thisisasecondaryalertbox. /div>divdata-alertclass="alert-boxsuccess"> strong>Succe
Foundation标签.label类用于提供一些附加信息: 实例h2>Examplespanclass="label">New/span>/h2>h3>Examplespanclass="label">New/span>/h3>h4>Examplespanclass="label">New/span>/h4>尝试一下»以下类可以设置标签的颜色:.secondary,.success,.info,.warning或.alert: 实例 spanclass="label">DefaultLabel/span>spanclass="label secondary">SecondaryLabel/s
Foundation标签.label类用于提供一些附加信息: 实例h2>Examplespanclass="label">New/span>/h2>h3>Examplespanclass="label">New/span>/h3>h4>Examplespanclass="label">New/span>/h4>尝试一下»以下类可以设置标签的颜色:.secondary,.success,.info,.warning或.alert: 实例 spanclass="label">DefaultLabel/span>spanclass="label secondary">SecondaryLabel/s
Foundation图标Foundation提供了283个图标,你可以使用css来定义它的样式尺寸。图标可用于文本,按钮,工具条,导航栏,表单等。以下是Foundation图标的实例:刷新按钮:检测图标:主页图标:图标语法创建图标语法格式如下:name部分替换为图标的名字。要使用图标我们需要在部分添加图标的样式文件:Icon实例以下演示了使用图标的实例: 实例 p>Cloudicon:iclass="fi-cloud">/i>/p>p>Cloudiconasalink: ahref="#">iclass="fi-cloud">/i>/a>/p>p>StyledCloudicon:i cla
Foundation图标Foundation提供了283个图标,你可以使用css来定义它的样式尺寸。图标可用于文本,按钮,工具条,导航栏,表单等。以下是Foundation图标的实例:刷新按钮:检测图标:主页图标:图标语法创建图标语法格式如下:name部分替换为图标的名字。要使用图标我们需要在部分添加图标的样式文件:Icon实例以下演示了使用图标的实例: 实例 p>Cloudicon:iclass="fi-cloud">/i>/p>p>Cloudiconasalink: ahref="#">iclass="fi-cloud">/i>/a>/p>p>StyledCloudicon:i cla
Foundation按钮组按钮组Foundation可以在同一行内创建一系列的按钮。可以使用元素并添加.button-group类来创建按钮组: 实例 ulclass="button-group"> li>buttontype="button" class="button">Apple/button>/li> li>buttontype="button" class="button">Samsung/button>/li> li>buttontype="button" class="button">Sony/button>/li>/ul>尝试一下»垂直按钮组垂直按钮组使用.stack类来创建。
Foundation按钮组按钮组Foundation可以在同一行内创建一系列的按钮。可以使用元素并添加.button-group类来创建按钮组: 实例 ulclass="button-group"> li>buttontype="button" class="button">Apple/button>/li> li>buttontype="button" class="button">Samsung/button>/li> li>buttontype="button" class="button">Sony/button>/li>/ul>尝试一下»垂直按钮组垂直按钮组使用.stack类来创建。